import 'package:flutter/material.dart';

// 程序入口，启动 Flutter 应用
void main() {
  runApp(const MyApp());
}

// 应用的主类，继承 StatelessWidget，因为应用本身不需要管理状态
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 状态管理示例', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.cyan, // 将主题色从 teal 为 cyan
      ),
      home: const HomePage(),
    );
  }
}

// 主页面，使用 StatefulWidget 管理底部导航栏的状态
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0; // 当前选中的页面索引

  // 页面列表，包含三个不同的状态管理示例
  static const List<Widget> _pages = <Widget>[
    TapboxAPage(),
    ParentWidget(),
    ParentWidgetC(),
  ];

  // 页面标题列表，与 _pages 对应
  static const List<String> _titles = [
    'TapboxA 自管理',
    'TapboxB 父管理',
    'TapboxC 混合管理', // 简化标题文字
  ];

  // 底部导航栏点击事件，更新选中的页面索引
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          _titles[_selectedIndex],
          style: const TextStyle(fontSize: 20), // 添加标题文字大小
        ),
      ),
      body: Center(child: _pages[_selectedIndex]), // 显示当前选中的页面
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.cyan[800], // 添加选中项颜色
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_1), // 更换图标
            label: 'TapboxA',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.filter_2), label: 'TapboxB'),
          BottomNavigationBarItem(icon: Icon(Icons.filter_3), label: 'TapboxC'),
        ],
        onTap: _onItemTapped,
      ),
    );
  }
}

// ------------------------- TapboxA 自管理状态示例 -------------------------

// TapboxA 是一个自管理状态的组件
class TapboxA extends StatefulWidget {
  const TapboxA({super.key});

  @override
  _TapboxAState createState() => _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false; // 内部状态，控制激活/非激活

  // 处理点击事件，切换激活状态
  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: _active ? Colors.green[600] : Colors.grey[500], // 颜色略
        ),
        child: Center(
          child: Text(
            _active ? '已激活' : '未激活', // 文本为中文
            style: const TextStyle(fontSize: 30, color: Colors.white), // 字体大小
          ),
        ),
      ),
    );
  }
}

class TapboxAPage extends StatelessWidget {
  const TapboxAPage({super.key});
  @override
  Widget build(BuildContext context) {
    return const TapboxA();
  }
}

// ------------------------- TapboxB 父管理子状态示例 -----------------------

// ParentWidget 管理 TapboxB 的状态
class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false; // 父组件管理状态

  // 处理子组件状态变化
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TapboxB(active: _active, onChanged: _handleTapboxChanged);
  }
}

// TapboxB 是一个无状态组件，状态由父组件管理
class TapboxB extends StatelessWidget {
  const TapboxB({super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged;

  // 点击时通知父组件更新状态
  void _handleTap() {
    onChanged(!active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color:
              active ? Colors.green[600] : Colors.grey[500], // 颜色与 TapboxA 一致
        ),
        child: Center(
          child: Text(
            active ? '已激活' : '未激活', // 文本为中文
            style: const TextStyle(fontSize: 30, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

// ------------------------- TapboxC 混合管理状态示例 -----------------------

// ParentWidgetC 管理 TapboxC 的激活状态
class ParentWidgetC extends StatefulWidget {
  const ParentWidgetC({super.key});

  @override
  _ParentWidgetCState createState() => _ParentWidgetCState();
}

class _ParentWidgetCState extends State<ParentWidgetC> {
  bool _active = false;

  // 处理子组件的激活状态变化
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TapboxC(active: _active, onChanged: _handleTapboxChanged);
  }
}

// TapboxC 是一个混合管理状态的组件，自身管理高亮状态，父组件管理激活状态
class TapboxC extends StatefulWidget {
  const TapboxC({super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged;

  @override
  _TapboxCState createState() => _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false; // 自身管理的高亮状态

  // 按下时高亮
  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  // 抬起时取消高亮
  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  // 取消点击时取消高亮
  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  // 点击时通知父组件切换激活状态
  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: widget.active ? Colors.green[600] : Colors.grey[500], // 颜色一致
          border:
              _highlight
                  ? Border.all(color: Colors.cyan[700]!, width: 8) // 边框宽度
                  : null,
        ),
        child: Center(
          child: Text(
            widget.active ? '已激活' : '未激活', // 文本为中文
            style: const TextStyle(fontSize: 30, color: Colors.white),
          ),
        ),
      ),
    );
  }
}
